<template>
  <GlobalContainer :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="房屋详情" showBack :fixed="true" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="p-24">
      <div class="mb-24 flex items-center">
        <image class="size-56" src="../../static/images/jiaofei/head_icon.png" />
        <div class="mx-16 text-34 leading-50 text-[#303133]">我的房屋</div>
        <Status :status="roomDetial.statusText" />
        <div class="del-btn ml-auto" @tap="deleteRoom">删除房源</div>
      </div>
      <div class="box-c">
        <div class="line1">
          <div class="title">{{ formatRoom(roomDetial) }}</div>
        </div>
        <div class="line2 mb-26 mt-16 flex items-center">
          <template>
            <div class="flex items-center" v-for="(item, index) in roomDetial.communityParkingList" :key="index">
              <div class="text-28 leading-42 text-[#606266]">车位{{ index + 1 }}:{{ item.parkingNumber }}</div>
              <div class="flex-0 mx-20 h-24 w-2 bg-[#4B85FA]" v-if="index !== roomDetial.communityParkingList.length - 1" />
            </div>
          </template>
        </div>
      </div>
      <div class="list-c bg-white px-32 py-36">
        <div class="item-c">
          <div class="title flex items-center justify-center">
            <image class="h-6 w-60" src="../../static/images/my/title_left_icon.png" />
            <span class="mx-16">已绑定用户</span>
            <image class="h-6 w-60" src="../../static/images/my/title_right_icon.png" />
          </div>
          <div class="user-cell-c">
            <div class="user-cell-item flex items-center border-b-1 border-[#efefef] pb-28 pt-38" v-for="item in bindList" :key="item.id">
              <div class="left mr-16">
                <image class="size-100" :src="`${OSS_URL}/images/my/avatar_icon.png`" />
              </div>
              <div class="right flex-1">
                <div class="name mb-10 text-30 leading-46 text-[#303133]">{{ item.realName }} {{ item.phone }}</div>
                <div class="flex items-center">
                  <div class="type text-28 leading-42 text-[#606266]">
                    {{ userTypeList.find(userType => userType.value === item.type)?.name }}
                  </div>
                  <div class="button ml-auto flex" v-if="item.type !== 0 && roomDetial.type === 0">
                    <template v-if="item.status === 2">
                      <div
                        class="ml-10 rounded-40 bg-[#4B85FA] px-28 py-10 text-28 leading-42 text-white"
                        @tap="unBindMemberHandle(item.id)"
                      >
                        解除
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-28 text-center text-28 leading-42 text-[#606266]" v-if="bindList.length === 0">暂无绑定住户</div>
          </div>
        </div>
        <div class="item-c mt-32" v-if="waitList.length > 0">
          <div class="title flex items-center justify-center">
            <image class="h-6 w-60" src="../../static/images/my/title_left_icon.png" />
            <span class="mx-16">待审核住户</span>
            <image class="h-6 w-60" src="../../static/images/my/title_right_icon.png" />
          </div>
          <div class="user-cell-c">
            <div class="user-cell-item flex items-center border-b-1 border-[#efefef] pb-28 pt-38" v-for="item in waitList" :key="item.id">
              <div class="left mr-16">
                <image class="size-100" :src="`${OSS_URL}/images/my/avatar_icon.png`" />
              </div>
              <div class="right flex-1">
                <div class="name mb-10 text-30 leading-46 text-[#303133]">{{ item.realName }} {{ item.phone }}</div>
                <div class="flex items-center">
                  <div class="type text-28 leading-42 text-[#606266]">
                    {{ userTypeList.find(userType => userType.value === item.type)?.name }}
                  </div>
                  <div class="button ml-auto flex" v-if="roomDetial.type === 0">
                    <template v-if="item.status < 2 && item.communityMemberId !== accountStore.userInfo.id">
                      <div
                        class="ml-10 rounded-40 bg-[#4B85FA] px-28 py-10 text-28 leading-42 text-white"
                        @tap.stop="auditMemberHandle(item, 2)"
                      >
                        同意
                      </div>
                      <div
                        class="ml-10 rounded-40 border-1 border-[#efefef] px-28 py-10 text-28 leading-42"
                        @tap.stop="auditMemberHandle(item, 3)"
                      >
                        拒绝
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-28 text-center text-28 leading-42 text-[#606266]" v-if="waitList.length === 0">暂无待审核住户</div>
          </div>
        </div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import Status from './components/status.vue'
import { onLoad } from '@dcloudio/uni-app'
import { userTypeList } from './config'
import { useAccountStore } from '@/store/modules/account'
import { removeMemberRoom, getMemberBuildingPage, auditMember, unBindMember } from '@/common/api/member'
import { getBuildingDetailApi } from '@/common/api/base'
import { formatRoom } from '@/common/format'
import { showModal, showToast } from '@/utils'

const accountStore = useAccountStore()
const OSS_URL = import.meta.env.VITE_OSS_URL

const roomDetial = ref({})
const bindList = ref([])
const waitList = ref([])
onLoad(options => {
  getMemberBuildingList(options.roomId)
  getRoomDetail(options.roomId)
})
const getRoomDetail = async roomId => {
  const res = await getBuildingDetailApi({ roomId })
  roomDetial.value = {
    ...res,
    statusText: res.status === 2 ? 'audit' : res.status === 3 ? 'rejected' : 'wait'
  }
}
const deleteRoom = () => {
  console.log('[ deleteRoom ] >')
  showModal({
    title: '提示',
    content: '确定删除房源吗？',
    success: () => {
      removeMemberRoom({ roomId: roomDetial.value.roomId }).then(res => {
        if (res) {
          showToast('删除成功')
          accountStore.getUserInfoByToken()
          uni.navigateBack()
        } else {
          showToast('删除失败')
        }
      })
    },
    cancel: () => {}
  })
}
const getMemberBuildingList = async roomId => {
  const res = await getMemberBuildingPage({ pageNo: 1, pageSize: 9999, roomId: roomId })
  console.log('[ getMemberBuildingList ] >', res)
  bindList.value = res.records.filter(item => item.status === 2)
  waitList.value = res.records.filter(item => item.status < 2)
}

const auditMemberHandle = (item, status) => {
  auditMember({ id: item.id, status: status }).then(res => {
    if (res) {
      getMemberBuildingList(roomDetial.value.roomId)
    }
  })
}
const unBindMemberHandle = id => {
  unBindMember({ id }).then(res => {
    if (res) {
      getMemberBuildingList(roomDetial.value.id)
      showToast('解除成功')
    } else {
      showToast('解除失败')
    }
  })
}
</script>

<style lang="scss" scoped>
.del-btn {
  width: 160rpx;
  height: 59rpx;
  line-height: 59rpx;
  background: #fafafa;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 1px solid #cdd0d6;
  font-size: 26rpx;
  color: #606266;
  text-align: center;
}
.box-c {
  padding-top: 32rpx;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  border: 2rpx solid white;
  background: #c5e6ff;
  // border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
}
.line1,
.line2 {
  padding: 0 24rpx;
}
</style>
